<template>
  <div class="rootMain">
    <template v-if="schoolList.length > 0">
      <div
        @mouseenter="onMouseOver(item, index)"
        @mouseleave="onMouseOut"
        class="item flex pointer"
        v-for="(item, index) in schoolList"
        :key="index"
      >
        <img
          class="img"
          :src="item.cover_image"
          alt=""
          @click="goDetail(item)"
        />
        <div class="content" @click="goDetail(item)">
          <div class="title ellipsis2 fz16">
            {{ item.name }}
          </div>
          <div class="c999 flex-align" @click="goDetail(item)">
            <span class="iconfont iconshipin"></span>
            <span class="pageView fz14">{{ item.page_view }}</span>
          </div>
        </div>
        <div class="tips" v-if="showTipsIndex == index" @click="cancelLike">
          <img src="~/assets/images/userCenter/1_shanchu.png" alt="" />
          <span class="c999 fz14 mt10">取消收藏</span>
        </div>
      </div>
      <div v-if="count > 0" class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="limit"
          :total="count"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </template>

    <template v-else>
      <el-empty description="暂无数据"></el-empty>
    </template>
  </div>
</template>

<script>
import { getMyCollect, sch_cancelLike } from "@/assets/api/userCenterApi.js";

export default {
  data() {
    return {
      showTipsIndex: -1, //展示右侧取消收藏的按钮的下标
      page: 1,
      limit: 10,
      count: 0,
      schoolList: [],
    };
  },
  mounted() {
    this.getMyCollect();
  },
  methods: {
    //进详情
    goDetail(item) {
      if (item.pptype == 1) {
        this.$router.push({
          path: "/Hot",
          query: { id: item.course_id },
        });
      } else if (item.pptype == 2) {
        this.$router.push({
          path: "/school/seefat/" + item.course_id + ".html",
        });
      } else if (item.pptype == 3) {
        this.$router.push({
          name: "Certificate",
          params: { id: item.course_id + '' }
        });
      }
    },
    //鼠标移入
    onMouseOver(item, index) {
      this.showTipsIndex = index;
    },
    //鼠标移出
    onMouseOut() {
      this.showTipsIndex = -1;
    },
    //取消收藏
    async cancelLike() {
      let params = {
        id: this.schoolList[this.showTipsIndex].id,
      };
      let res = await sch_cancelLike(params);
      this.showTipsIndex = -1;
      if (res.code == 1) {
        this.$message({
          message: "取消收藏成功",
          type: "success",
        });
        this.schoolList = [];
        this.page = 1;
        this.getMyCollect();
      }
    },
    async getMyCollect() {
      var params = {
        page: this.page,
        limit: this.limit,
        type: 3,
      };
      let res = await getMyCollect(params);
      if (res.code == 1) {
        this.schoolList = res.data.data;
        this.count = res.data.total

      }
    },

     //分页
     changePage(e) {
      console.log("分页", e);
      this.page = e;
      this.getMyCollect();
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");
@import url("@/assets/static/iconfont.css");

.rootMain {
  padding: 30px 0;
  .item {
    position: relative;
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #f4f4f4;
    &:hover {
      background: #f7f9fb;
      color: #1c87f3;
    }

    .img {
      width: 220px;
      height: 137px;
      min-width: 220px;
      min-height: 137px;
      border-radius: 6px 6px 6px 6px;
      margin-right: 42px;
    }
    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        width: 600px;
      }
    }

    .top-wrap {
      position: relative;
    }

    .iconshipin {
      vertical-align: middle;
      margin-right: 5px;
      margin-top: 4px;
    }
  }
  .tips {
    cursor: pointer;
    position: absolute;
    top: 27px;
    right: 37px;

    img {
      width: 26px;
      height: 26px;
      vertical-align: middle;
    }
  }
}
.page {
  padding-top: 13px;
  padding-bottom: 63px;
  display: flex;
  justify-content: center;
}
</style>

<style lang="scss" scoped>
::v-deep .is-active {
  border-bottom-color: white !important;
}
</style>
